<!-- src/components/Calendar/CalendarSidebar.vue -->
<template>
  <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
    <div class="sidebar-content">
      <!-- 创建按钮 -->
      <el-button class="create-btn" @click="$emit('create-event')" type="primary">
        <el-icon><Plus /></el-icon>
        创建
      </el-button>
      
      <!-- 迷你日历 -->
      <div class="mini-calendar">
        <div class="mini-calendar-header">
          <span>{{ miniCalendarTitle }}</span>
          <div class="mini-calendar-nav">
            <el-button class="nav-btn" @click="$emit('previous-month')" :icon="ArrowLeft" />
            <el-button class="nav-btn" @click="$emit('next-month')" :icon="ArrowRight" />
          </div>
        </div>
        
        <!-- 星期标题 -->
        <div class="mini-week-header">
          <div class="mini-week-day" v-for="day in weekDaysShort" :key="day">{{ day }}</div>
        </div>
        
        <!-- 日历网格 -->
        <div class="mini-calendar-grid">
          <div 
            class="mini-day" 
            v-for="day in miniCalendarDays" 
            :key="`${day.fullDate.getTime()}`"
            :class="{
              'other-month': !day.isCurrentMonth,
              'today': day.isToday,
              'selected': day.isSelected
            }"
            @click="$emit('select-date', day)"
          >
            {{ day.date }}
          </div>
        </div>
      </div>
      
      <!-- 找人功能 -->
      <div class="find-person">
        <el-icon><User /></el-icon>
        <span>找人</span>
      </div>
      
      <!-- 我的日历 -->
      <div class="appointment-section">
        <div class="section-title">
          <span>我的日历</span>
          <el-icon 
            :class="{ 'rotated': !isCalendarExpanded }"
            @click="toggleCalendar"
            style="cursor: pointer; transition: transform 0.3s;"
          >
            <ArrowUp />
          </el-icon>
        </div>
        
        <!-- 下拉选项 -->
        <div v-show="isCalendarExpanded" class="calendar-options">
          <!-- 用户名+的活动 -->
          <div class="calendar-option">
            <el-checkbox 
              :model-value="cardStore.showActivityCards"
              @update:model-value="cardStore.setShowActivityCards($event)"
            >
              {{ username }}的活动
            </el-checkbox>
          </div>
          
          <!-- 任务列表选项 -->
          <div 
            v-for="taskList in taskLists" 
            :key="taskList.id"
            class="calendar-option"
          >
            <el-checkbox 
              :model-value="cardStore.isTaskListVisible(taskList.id)"
              @update:model-value="cardStore.setTaskListVisible(taskList.id, $event)"
            >
              {{ taskList.name }}
            </el-checkbox>
          </div>
        </div>
      </div>
    </div>
  </aside>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { Plus, User, ArrowUp, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { useCardStore } from '@/store/card'
import { useTaskListStore } from '@/store/taskList'

interface Props {
  sidebarCollapsed: boolean
  miniCalendarMonth: number
  miniCalendarYear: number
  miniCalendarDays: any[]
  username: string
}

const props = defineProps<Props>()

const emit = defineEmits([
  'create-event',
  'previous-month',
  'next-month',
  'select-date'
])

const cardStore = useCardStore()
const taskListStore = useTaskListStore()

const isCalendarExpanded = ref(true)

const toggleCalendar = () => {
  isCalendarExpanded.value = !isCalendarExpanded.value
}

// 获取任务列表（响应式）
const taskLists = computed(() => taskListStore.taskLists)

// 监听任务列表变化，初始化显示状态
watch(() => taskLists.value.length, async (newLength) => {
  if (newLength > 0) {
    await cardStore.initTaskListVisibility()
  }
}, { immediate: true })

onMounted(async () => {
  // 确保任务列表已初始化
  if (taskListStore.taskLists.length === 0) {
    await taskListStore.init()
  }
  // 初始化任务列表显示状态
  await cardStore.initTaskListVisibility()
})

const weekDaysShort = ['日', '一', '二', '三', '四', '五', '六']

const miniCalendarTitle = computed(() => {
  return `${props.miniCalendarYear}年${props.miniCalendarMonth + 1}月`
})
</script>

<style scoped>
.sidebar {
  width: 280px;
  background: #f8f9fa;
  border-right: 1px solid #e0e0e0;
  transition: width 0.3s ease;
  overflow-y: auto;
}

.sidebar.collapsed {
  width: 0;
  overflow: hidden;
}

.sidebar-content {
  padding: 20px;
}

.create-btn {
  width: 100%;
  margin-bottom: 24px;
  background: #1976d2;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
}

.mini-calendar {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mini-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
  color: #333;
}

.mini-calendar-nav {
  display: flex;
  gap: 4px;
}

.mini-calendar-nav .nav-btn {
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 12px;
}

.mini-week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.mini-week-day {
  text-align: center;
  font-size: 12px;
  color: #666;
  padding: 4px 0;
}

.mini-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.mini-day {
  text-align: center;
  padding: 8px 4px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.mini-day:hover {
  background: #e3f2fd;
}

.mini-day.other-month {
  color: #ccc;
}

.mini-day.today:not(.selected) {
  background: white;
  color: #1976d2;
  border: 1px solid #1976d2;
}

.mini-day.selected {
  background: #1976d2;
  color: white;
}

.mini-day.today.selected {
  background: #1976d2;
  color: white;
  border: 1px solid #1976d2;
}

.find-person {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.appointment-section {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-weight: 600;
  color: #333;
}

.calendar-options {
  margin-top: 12px;
}

.calendar-option {
  margin-bottom: 8px;
}

.calendar-option:last-child {
  margin-bottom: 0;
}

.rotated {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .sidebar {
    width: 240px;
  }
}
</style>